import PropTypes from "prop-types";
import React, { memo, useState } from "react";
import { TabsWrapper } from "./style";
import classNames from "classnames";
import ScrollView from "@/components/scroll-view";

const SectionTabs = memo((props) => {
  const { tabsData = [], tabClick } = props;
  // 标签不够多不能滚动，加点假数据
  tabsData.push(...["测试分组1", "测试分组2", "测试分组3", "测试分组4"]);
  const [currentTab, setCurrentIndex] = useState(0);
  const changeTab = (index) => {
    setCurrentIndex(index);
    // 父组件的方法
    // HomeSection组件获取当前城市的下标
    tabClick(index);
  };
  return (
    <TabsWrapper>
      <ScrollView>
        {tabsData.map((item, index) => {
          return (
            <div
              className={classNames("tab", { active: currentTab === index })}
              key={index}
              onClick={(e) => changeTab(index)}
            >
              {item}
            </div>
          );
        })}
      </ScrollView>
    </TabsWrapper>
  );
});

SectionTabs.propTypes = {
  tabsData: PropTypes.array,
};

export default SectionTabs;
